<template>
  <div class="graph-column graph-column-box">
    <div id="nums" class="column m-b-10" @drop='dropValue($event)' @dragover='allowDrop($event)' >
      <div class="title f-l">
        <span class="rounds"></span>
        <span>数值</span>
      </div>
      <ul class="">
        <li v-for="(item,index) in numbers" :key="index" draggable="true"   @dragstart="cloumnMoveStart('nums',index,$event)">
          <column-menu :groupOptions="dataType.int.indexOf(item.dataType)!=-1?numOptions:textOptions" v-model="numbers[index]" >
            <span class="cloumntit">{{item.kpiName}}
            </span>
            <span slot="last" class="pointer close" @click="removeNums(index)"> <i class="zlstbd-icon-delete"></i></span>
          </column-menu>
        </li>
      </ul>
    </div>
  </div>
</template>
<script type="text/javascript">
export default {
  data () {
    return {
      groups: [],
      numbers: [],
      dataType:{
        int:'int,float,double',
        data:'date,timestamp'
      }
    }
  },
  methods: {
    dropValue(ev){
        var cloum ,index=-1,$dom,$cloum;
        // 通过id为nums, groups来判断放置对象是组还是数值
        for(var i=0;i<ev.path.length;i++){
            if(ev.path[i].id=='nums'){
                cloum="nums";
                $cloum=ev.path[i];
            }else if(ev.path[i].id=='groups'){
                cloum='groups';
                $cloum=ev.path[i];
            }
            if( ev.path[i].className ==='group-menu'){
                $dom=ev.path[i];
            }
        }
        if($dom!=null){
            var $list =$cloum.querySelectorAll('.group-menu');
            for(var i =0 ;i<$list.length;i++){
                if($list[i]==$dom){
                    index=i+'';
                }
            }
        }

        this.isNumberChange = false
        if(this.moveType==='table'){
            //1左侧  字段  新增
            var item =util.util.cloneObj(this.moveItem);
            // console.log('item: ', item)
            if(cloum=='nums'){
              // 数值新增
                // if(this.dataTypeInfo.int.indexOf(item.dataType)!=-1){
                //     item.aggregation="SUM";
                //     item.aggregationName="求和";
                // }else {
                //     item.aggregation="COUNT";
                //     item.aggregationName="计数";
                // }
                if(util.util.getArrayObjectByValues(this.numbers,item,'kpiName')==null){
                  if (this.groups.length === 0) {
                    this.isNumberChange = true
                  }
                  this.numbers.push(item);
                  this.getDimension()
                }else{
                    this.$Message.error('该字段已经在筛选列表里，请勿重复添加')
                }
            }else if(cloum=='groups'  && this.groups.length<2){
              // 分组
                if(util.util.getArrayObjectByValues(this.groups,item,'kpiName')==null){
                    this.groups.push(item);
                }else{
                    this.$Message.error('该字段已经在筛选列表里，请勿重复添加')
                }
            }
        }else if(this.moveType ==='cloumn'){
            //2维度和数据   改变位置
            var moveIndex =ev.dataTransfer.getData("index");
            var mtype  =ev.dataTransfer.getData("moveType");
            if( mtype==cloum && moveIndex!==index){
                var list =cloum=='nums'?this.numbers:this.groups;
                if(index<0){//没有选择
                    index=list.length-1;
                }
                var good=list[moveIndex];
                var goodo=list[index];
                list.splice(moveIndex,1,goodo);
                list.splice(index,1,good);
            }
        }
    },
    allowDrop(ev){
        ev.preventDefault();
    },
    cloumnMoveStart(type,index,ev){
        this.moveType='cloumn';
        ev.dataTransfer.setData("index",index);
        ev.dataTransfer.setData("moveType",type);
    },
    removeNums(index){
      this.isNumberChange = true
      this.numbers.splice(index,1);
      this.getDimension()
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
</style>
